<template>
  <div class="cards-section">
    <h2>解析结果 (共 {{ cards.length }} 张卡片)</h2>
    
    <div class="cards-controls" v-if="cards.length > 0">
      <button @click="exportAll" class="primary-button">批量导出到Anki</button>
      <button @click="generateCsv" class="secondary-button">生成CSV文件</button>
      <button @click="clearAll" class="danger-button">清空所有</button>
    </div>
    
    <div class="cards-list">
      <CardItem
        v-for="(card, index) in cards"
        :key="index"
        :card="card"
        :index="index"
        :is-editing="editingIndex === index"
        @edit="startEdit"
        @delete="deleteCard"
        @export="exportSingleCard"
        @save="saveCard"
        @cancel-edit="cancelEdit"
      />
    </div>
  </div>
</template>

<script>
import CardItem from './CardItem.vue';

export default {
  name: 'CardList',
  components: {
    CardItem
  },
  props: {
    cards: {
      type: Array,
      default: () => []
    },
    editingIndex: {
      type: Number,
      default: -1
    }
  },
  methods: {
    startEdit(index) {
      this.$emit('start-edit', index);
    },
    deleteCard(index) {
      this.$emit('delete-card', index);
    },
    exportSingleCard(index) {
      this.$emit('export-single', index);
    },
    saveCard(index, form) {
      this.$emit('save-card', index, form);
    },
    cancelEdit() {
      this.$emit('cancel-edit');
    },
    exportAll() {
      this.$emit('export-all');
    },
    generateCsv() {
      this.$emit('generate-csv');
    },
    clearAll() {
      if (confirm('确定要清空所有卡片吗？')) {
        this.$emit('clear-all');
      }
    }
  }
}
</script>